<template>
  <!-- 使用 v-if 控制渲染不同类型的图标 -->
  <img
      v-if="isExternal"
      :class="'img-icon'"
      :src="icon"
      alt="icon"
  />
  <svg
      v-else-if="isCustomSvg"
      aria-hidden="true"
      :class="computedClassName"
  >
    <use :xlink:href="`#vab-icon-${icon}`"></use>
  </svg>
  <i
      v-else
      aria-hidden="true"
      :class="[`ri-${icon}`, computedClassName]"
  ></i>
</template>

<script>
import { computed, defineComponent } from 'vue';

export default defineComponent({
  name: 'VabIcon',
  props: {
    icon: {
      type: String,
      required: true,
    },
    isCustomSvg: {
      type: Boolean,
      default: false,
    },
    className: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    // 计算图标的 CSS 类名
    const computedClassName = computed(() =>
        props.className ? `vab-icon ${props.className}` : 'vab-icon'
    );

    // 判断是否为外部链接
    const isExternal = computed(() => /^(https?:|mailto:|tel:|\/\/)/.test(props.icon));

    return {
      computedClassName,
      isExternal,
    };
  },
});
</script>

<style scoped>
.vab-icon {
  /* 这里可以根据需要添加样式 */
}
.img-icon {
  width: 1em;
  height: 1em;
}
</style>
